/*
 * @Author: cygao
 * @Last Modified by: xieqing
 * @Last Modified time: 2018-03-14
 */

<template>
  <div class="verify-hosue" id="goback">
    <div class="step">
      <flow>
        <flow-state title="验证房源" is-done></flow-state>
        <flow-line></flow-line>

        <flow-state title="房屋信息"></flow-state>
        <flow-line></flow-line>

        <flow-state title="出租信息"></flow-state>
        <flow-line></flow-line>
        <flow-state title="选择合同"></flow-state>
        <flow-line></flow-line>
        <flow-state title="发布房源"></flow-state>
      </flow>
    </div>
    <div style="height:0.3rem;background:#f4f4f4"></div>
    <div class="verify-input">
      <div class="input-item m-border">
        <span>房地产权证书编号 : </span><input class="m-input" v-model="housePocCode" type="text" placeholder="请输入房地产权证书编号">
      </div>
    </div>
    <div style="height:0.3rem;background:#f4f4f4"></div>
    <div class="verify-content">
      <!-- 业主主题信息 -->
      <div class="user-info">
        <p class="user-title">业主主体信息</p>
        <div class="input-item m-border">
          <span>姓名 : </span><input class="m-input" v-model="userName" type="text" disabled placeholder="请输入姓名">
        </div>
        <div class="input-item m-border">
          <span>身份证号 : </span><input class="m-input" v-model="idCard" type="text" disabled placeholder="请输入身份证号">
        </div>
        <div class="input-item m-border">
          <span>手机号 : </span><input class="m-input" v-model="phoneNumber" type="text" disabled placeholder="请输入手机号">
        </div>
      </div>
      <section class="tip">
        <ol>
          <li>目前仅支持有产权证编号房源发布</li>
          <li>检测到该房产证是共有产权的，请用户添加相应的产权人身份证明信息，以及全部产权人签字确认的授权委托书</li>
          <li>发布房源时添加相应抵押人出具的同意出租证明或者直接在网上平台申请抵押权人出具同意出租证明文件</li>
        </ol>
      </section>
      <div class="verify-btn">
        <x-button class="btn" type="primary" @click.native="verifyHouse">下一步</x-button>
      </div>
    </div>
  </div>
</template>
<script>
// import UploadFileByTXY from '../../../util/uploadFileByTXY'
import { Checklist } from 'vux'
export default {
  components: {
    Checklist
  },
  data () {
    return {
      userName: '',
      idCard: '',
      phoneNumber: '',
      housePocCode: ''
    }
  },
  created () {
    // 获得业主信息
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    this.userName = userInfo.trueName
    this.idCard = userInfo.idCard.replace(/(\d{4})\d*(\d{4})/, '$1**********$2')
    this.phoneNumber = userInfo.mobile.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
  },
  methods: {
    beforeSubmit () {
      // 验证输入房产证编号
      if (!this.housePocCode) {
        this.$vux.toast.text('请输入房产证编号')
        return false
      } else {
        return true
      }
    },
    verifyHouse () {
      if (!this.beforeSubmit()) return
      // 发房信息存储
      let pubishHouseData = {
        housePocCode: this.housePocCode
      }
      localStorage.setItem('pubishHouseData', JSON.stringify(pubishHouseData))
      this.$router.push('./houseInfo')
    }
  }
}
</script>

<style lang="less">
  .verify-hosue{
    font-size: 0.75rem;
    height: 100vh;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .weui-wepay-flow__title-bottom {
      font-size: 0.65rem;
    }
    .step{
      height: 4.05rem;
    }
    .tip {
      padding: 0 0.75rem;
      color: #999;
      padding-top: 1.0rem;
      ol {
        padding-left: 0.9rem;
        font-size: 0.65rem;
        line-height: 1.5;
        li {
          padding-bottom: 0.75rem;
          list-style: decimal;
          list-style-position: outside;
        }
      }
    }
    .input-item{
      padding: 0 0.75rem;
      display: flex;
      line-height: 2.4rem;
      .house-rent-style{
        display: flex;
        flex:1;
        .weui-cells {
          font-size: 0.75rem;
        }
        .weui-cells__title {
          margin:0;
          padding: 0;
          color: black;
          font-size: 0.75rem;
        }
        .weui-cells:before{
          border: none;
          height: 0;
        }
        .weui-cell:before{
          border: none;
          height:0;
        }
        .weui-cells:after{
          border:none;
        }
        .weui-cells_checkbox{
          display: flex;
          flex: 1;
          color:#999;
          justify-content: space-around;
        }
        .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
          color: #ff9600;
        }
      }
      span{
        width: 7rem;
      }
      .m-input{
        flex: 1;
        background: #fff;
        border:none;
        // color: #999;
        outline:none;
        font-size: 0.75rem;
        text-align: right;
      }
    }
    .m-border{
      border-bottom: 1px solid #f4f4f4
    }
    .verify-content{
      .user-info{
        .user-title{
          padding-left: 0.6rem;
          line-height: 1.25;
          font-size: 0.75rem;
          font-weight: bold;
          margin: 0.5rem 0px;
          color: #333;
          border-left: 0.15rem solid #ff9600;
        }
      }
      .verify-img{
        padding-top:.5rem;
        .verify-img-title{
          font-size: .8rem;
        }
        .verify-upload-img{
          padding-top:.5rem;
          text-align: center;
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;
          .upload-img-item{
            // width: 8.5rem;
            // height: 5rem;
            box-sizing: border-box;
            .m-img{
              width:100%;
              // height: 5rem;
              img{
                width: 5.35rem;
                height: 5.35rem;
                border:1px solid #ccc;
                border-radius: 0.125rem;
                object-fit: contain;
              }
            }
            .m-tips{
              color: #777;
            }
          }
        }
      }
      .verify-btn{
        padding: 0 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
        .btn{
          background: #169bd5;
          height: 2.25rem;
        }
      }
    }
  }

</style>
